<template>
  <div class="nav-bar">
    <div class="popup" v-show="popupShow">
      <div class="user-message">
        <div class="user-box">
          <div class="close" @click="popupDown">
            <span class="iconfont icon-guanbi"></span>
          </div>
          <div class="user-main">
            <div class="main-left">
              <div class="left-title">用户中心</div>
            </div>
            <div class="main-right">
              <div class="user-photo">
                <div class="profile-photo">
                  <img src="@/assets/profile-photo.png" alt="" />
                  <span>编辑</span>
                </div>
                <div class="user-name">
                  <div class="name">
                    {{
                      this.$store.state.user.userInfo.studentName === "未设置"
                        ? "用户"
                        : this.$store.state.user.userInfo.studentName
                    }}
                  </div>
                  <div class="id">
                    ID: {{ this.$store.state.user.userInfo.studentId }}
                  </div>
                </div>
              </div>
              <div class="user-info">
                <div class="info-item">
                  <div class="item-title">姓名</div>
                  <el-input
                    :readonly="canEdit ? false : true"
                    v-model="userInfo.studentName"
                    placeholder="请完善信息"
                  ></el-input>
                </div>
                <div class="info-item">
                  <div class="item-title">性别</div>
                  <template>
                    <el-radio
                      :disabled="!this.canEdit"
                      v-model="userInfo.studentGender"
                      label="1"
                      >男</el-radio
                    >
                    <el-radio
                      :disabled="!this.canEdit"
                      v-model="userInfo.studentGender"
                      label="2"
                      >女</el-radio
                    >
                  </template>
                </div>
                <div class="info-item">
                  <div class="item-title">邮箱</div>
                  <el-input
                    :readonly="canEdit ? false : true"
                    v-model="userInfo.studentEmail"
                    placeholder="请完善信息"
                  ></el-input>
                </div>
                <div class="info-item">
                  <div class="item-title">班级</div>
                  <el-input
                    :readonly="canEdit ? false : true"
                    v-model="userInfo.gressName"
                    placeholder="请完善信息"
                  ></el-input>
                </div>
                <div class="info-item">
                  <div class="item-title">学号</div>
                  <el-input
                    :readonly="canEdit ? false : true"
                    v-model="userInfo.stuNum"
                    placeholder="请完善信息"
                  ></el-input>
                </div>
              </div>

              <div class="edit-button" @click="changeEdit">
                {{ canEdit ? "保存" : "编辑" }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home" @click="goHome">
      <div class="title">猿创考试答题系统</div>
      <img src="@/assets/icon/home.png" alt="" />
      <p>首页</p>
    </div>
    <div class="user">
      <img src="@/assets/icon/user.png" alt="" />
      <p>
        {{
          this.$store.state.user.userInfo.studentName === "未设置"
            ? "用户"
            : this.$store.state.user.userInfo.studentName
        }}
      </p>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="popupOn">个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
// import store from '@/store'
import { editInfo } from "@/api";

export default {
  data() {
    return {
      popupShow: false,
      userInfo: {},
      canEdit: false,
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    // 获取用户信息
    getInfo() {
      this.userInfo = {
        studentName:
          this.$store.state.user.userInfo.studentName === null
            ? "用户"
            : this.$store.state.user.userInfo.studentName,
        studentGender:
          this.$store.state.user.userInfo.studentGender === null
            ? this.$store.state.user.userInfo.studentGender
            : this.$store.state.user.userInfo.studentGender.toString(),
        studentEmail: this.$store.state.user.userInfo.studentEmail,
        gressName: this.$store.state.user.userInfo.gressName,
        stuNum: this.$store.state.user.userInfo.stuNum,
        studentId: this.$store.state.user.userInfo.studentId,
      };
      // console.log(this.userInfo);
    },
    // 退出登录
    logout() {
      this.$store.dispatch("user/logout");
    },

    // 返回首页
    goHome() {
      // console.log(this.$route.path);
      if (this.$route.path != "/home") {
        // console.log(1);
        this.$router.push("/");
      }
    },

    // 展开弹出层
    popupOn() {
      this.popupShow = true;
    },

    // 关闭弹出层
    popupDown() {
      this.popupShow = false;
    },

    // 改变编辑状态
    changeEdit() {
      if (this.canEdit) {
        editInfo(this.userInfo).then((res) => {
          let info = this.$store.state.user.userInfo;
          info.studentName = this.userInfo.studentName;
          info.studentGender = this.userInfo.studentGender;
          info.studentEmail = this.userInfo.studentEmail;
          info.gressName = this.userInfo.gressName;
          info.stuNum = this.userInfo.stuNum;
          info.studentId = this.userInfo.studentId;
          this.$store.commit("user/setUserInfo", info);
          this.$message.success("修改信息成功");
        });
      }
      this.canEdit = !this.canEdit;
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e9dfe5;

  .popup {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 1999;
    background-color: rgba(0, 0, 0, 0.3);

    .user-message {
      // position: absolute;
      // top: 5%;
      // left: 25%;
      width: 650px;
      height: 600px;
      background-color: #fff;
      // background: url('@/assets/bg1.png') no-repeat center top/100%;
      border-radius: 12px;
      overflow: hidden;

      .user-box {
        position: relative;
        width: 100%;
        height: 100%;
        background: url("@/assets/bg1.png") no-repeat center top/100%;

        .close {
          position: absolute;
          top: 8px;
          right: 12px;
          cursor: pointer;
        }

        .user-main {
          display: flex;
          width: 100%;
          height: 78%;
          // background-color: red;

          .main-left {
            height: 100%;
            width: 25%;
            // background-color: red;
            border-right: 1px solid rgba(0, 0, 0, 0.05);
            padding: 32px 0 0 0;

            .left-title {
              text-align: center;
              font-size: 26px;
              font-weight: 600;
            }
          }

          .main-right {
            height: 100%;
            width: 75%;
            padding-top: 30px;
            // background-color: blue;

            .user-photo {
              // width: 490px;
              height: 100px;
              display: flex;
              margin-bottom: 32px;
              margin-left: 55.4px;
              // background-color: pink;

              .profile-photo {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                width: 72px;
                height: 100%;
                margin-right: 20px;
                // background-color: pink;

                img {
                  width: 72px;
                  height: 72px;
                  border-radius: 50%;
                }

                span {
                  font-size: 12px;
                  line-height: 16px;
                  font-weight: 400;
                  color: #007bff;
                  cursor: pointer;
                }
              }
            }

            .user-name {
              .name {
                font-size: 26px;
                font-weight: 600;
                padding: 10px 0;
              }

              .id {
                font-size: 14px;
                font-weight: 400;
                color: #8b968d;
              }
            }

            .user-info {
              padding-left: 48px;

              .info-item {
                margin-bottom: 10px;
              }

              .item-title {
                font-size: 12px;
                font-weight: 600;
                color: #0006;
              }

              ::v-deep .el-input {
                // padding: 0;
                width: 80%;
                .el-input__inner {
                  height: 30px;
                  padding: 0;
                  border: none;
                  border-bottom: 1px solid #dcdfe6;
                  border-radius: 0;
                  // margin-bottom: 10px;
                }
              }
            }

            .edit-button {
              margin: 0 auto;
              margin-top: 15px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 137px;
              height: 36px;
              background-color: #000;
              border-radius: 12px;
              color: #fff;
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .home,
  .user {
    display: flex;
    align-items: center;
    margin: 0 30px;
    img {
      height: 25px;
      width: 25px;
    }
    cursor: pointer;
  }

  .home {
    img {
      margin-right: 10px;
    }

    .title {
      // margin-left: 40px;
      margin-right: 30px;
      font-weight: 800;
      color: #5b7e91;
      cursor: default;
    }
  }

  .user {
    img,
    p {
      cursor: default;
    }

    p {
      margin-left: 10px;
    }

    span {
      margin: 0 10px;
    }
  }
}
</style>
